<template>
  <view class="container">
    <!-- 顶部信息栏 -->
    <view class="header-card">
      <view class="header">
        <text class="title">设备统计</text>
      </view>
    </view>

    <!-- 单元统计 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <uni-icons type="home" size="20" color="#2979ff"></uni-icons>
          <text class="title">单元统计</text>
        </view>
      </view>
      <view class="unit-info">
        <view class="unit-total">
          <text class="num">5</text>
          <text class="label">智慧单元</text>
        </view>
        <view class="unit-details">
          <view class="detail-item">
            <view class="item-header">
              <text class="num">4</text>
              <text class="label">传感器</text>
            </view>
            <view class="status-list">
              <view class="status-item">
                <text class="label">在线：</text>
                <text class="value online">4</text>
              </view>
              <view class="status-item">
                <text class="label">离线：</text>
                <text class="value">0</text>
              </view>
              <view class="status-item">
                <text class="label">报警：</text>
                <text class="value">0</text>
              </view>
            </view>
            <view class="sensor-details">
              <view v-for="sensor in sensors" :key="sensor.id" class="sensor-item">
                <text class="sensor-name">{{ sensor.name }}</text>
                <view class="sensor-data">
                  <text class="data-item">温度: {{ sensor.temperature }}°C</text>
                  <text class="data-item">湿度: {{ sensor.humidity }}%</text>
                  <text class="data-item">氮含量: {{ sensor.soilN }} mg/kg</text>
                  <text class="data-item">磷含量: {{ sensor.soilP }} mg/kg</text>
                  <text class="data-item">钾含量: {{ sensor.soilK }} mg/kg</text>
                </view>
              </view>
            </view>
          </view>
          <view class="detail-item">
            <view class="item-header">
              <text class="num">4</text>
              <text class="label">控制器</text>
            </view>
            <view class="status-list">
              <view class="status-item">
                <text class="label">在线：</text>
                <text class="value online">4</text>
              </view>
              <view class="status-item">
                <text class="label">离线：</text>
                <text class="value">0</text>
              </view>
              <view class="status-item">
                <text class="label">报警：</text>
                <text class="value alarm">0</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 摄像头统计 -->
    <view class="section-card">
      <view class="card-header">
        <view class="header-left">
          <uni-icons type="camera" size="20" color="#2979ff"></uni-icons>
          <text class="title">摄像头统计</text>
        </view>
      </view>
      <view class="camera-info">
        <view class="camera-total">
          <text class="num">1</text>
          <text class="label">共有摄像头</text>
        </view>
        <view class="camera-types">
          <view class="type-list">
            <view class="type-item">
              <text class="name">单元摄像头</text>
              <view class="status-row">
                <text class="label">在线：</text>
                <text class="value online">1</text>
                <text class="label">离线：</text>
                <text class="value">0</text>
                <text class="label">报警：</text>
                <text class="value alarm">0</text>
              </view>
            </view>
            <view class="type-item">
              <text class="name">仓库摄像头</text>
              <view class="status-row">
                <text class="label">在线：</text>
                <text class="value online">0</text>
                <text class="label">离线：</text>
                <text class="value">0</text>
                <text class="label">报警：</text>
                <text class="value alarm">0</text>
              </view>
            </view>
            <view class="type-item">
              <text class="name">通用摄像头</text>
              <view class="status-row">
                <text class="label">在线：</text>
                <text class="value online">0</text>
                <text class="label">离线：</text>
                <text class="value">0</text>
                <text class="label">报警：</text>
                <text class="value alarm">0</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listSensor } from "@/api/sensor/sensor"
export default {
  components: {
  },
  data() {
    return {
      sensors: []
    };
  },
  mounted() {
    this.fetchSensorData()
  },
  methods:{
    async fetchSensorData(){
      try {
        const now = new Date();
        const fiveMinutesAgo = new Date(now.getTime() - 5 * 60 * 1000);

        // 格式化时间为 YYYY-MM-DD HH:mm:ss
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0');
          const day = String(date.getDate()).padStart(2, '0');
          const hours = String(date.getHours()).padStart(2, '0');
          const minutes = String(date.getMinutes()).padStart(2, '0');
          const seconds = String(date.getSeconds()).padStart(2, '0');
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        };

        const response = await listSensor({
          pageNum: 1,
          pageSize: 1000,
          startTime: formatDate(fiveMinutesAgo),
          endTime: formatDate(now)
        });

        if (response && response.rows) {
          const latestData = {};

          // 获取每个传感器最新的数据
          response.rows.forEach(item => {
            if (!latestData[item.name] || new Date(item.timestamp) > new Date(latestData[item.name].timestamp)) {
              latestData[item.name] = item;
            }
          });
          // console.log(latestData)
          // 更新传感器状态
          this.sensors = Object.keys(latestData).map(sensorName => {
            const sensorData = latestData[sensorName];
            // console.log(sensorData.temperature)
            return {
              id: sensorData.id,
              name: sensorData.name,
              temperature:sensorData.temperature,
              humidity:sensorData.humidity,
              soilN:sensorData.soilN,
              soilp:sensorData.soilp,
              soilk:sensorData.soilk,
            };
          });
        }
      } catch (error) {
        console.error('获取传感器数据失败:', error);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f7f9;
  min-height: 100vh;
}

.header-card,
.section-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.header {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
}

.card-header {
  margin-bottom: 20rpx;

  .header-left {
    display: flex;
    align-items: center;
    gap: 10rpx;

    .title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }
  }
}

.unit-info {
  .unit-total {
    text-align: center;
    margin-bottom: 30rpx;

    .num {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      display: block;
    }

    .label {
      font-size: 28rpx;
      color: #666;
    }
  }

  .unit-details {
    .detail-item {
      background: #f8f9fa;
      border-radius: 12rpx;
      padding: 20rpx;
      margin-bottom: 20rpx;

      .item-header {
        margin-bottom: 20rpx;

        .num {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-right: 10rpx;
        }

        .label {
          font-size: 28rpx;
          color: #666;
        }
      }

      .status-list {
        display: flex;
        gap: 30rpx;

        .status-item {
          .label {
            font-size: 26rpx;
            color: #666;
          }

          .value {
            font-size: 26rpx;
            color: #666;

            &.online {
              color: #07c160;
            }

            &.alarm {
              color: #ee0a24;
            }
          }
        }
      }

      .sensor-details {
        .sensor-item {
          margin-bottom: 20rpx;

          .sensor-name {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
          }

          .sensor-data {
            .data-item {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.camera-info {
  .camera-total {
    text-align: center;
    margin-bottom: 30rpx;

    .num {
      font-size: 48rpx;
      font-weight: bold;
      color: #333;
      display: block;
    }

    .label {
      font-size: 28rpx;
      color: #666;
    }
  }

  .camera-types {
    .type-list {
      .type-item {
        background: #f8f9fa;
        border-radius: 12rpx;
        padding: 20rpx;
        margin-bottom: 20rpx;

        .name {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
          display: block;
        }

        .status-row {
          display: flex;
          gap: 20rpx;
          flex-wrap: wrap;

          .label {
            font-size: 26rpx;
            color: #666;
          }

          .value {
            font-size: 26rpx;
            color: #666;

            &.online {
              color: #07c160;
            }

            &.alarm {
              color: #ee0a24;
            }
          }
        }
      }
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;

  .stat-card {
    background: #fff;
    border-radius: 12rpx;
    padding: 20rpx;
    text-align: center;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    .stat-icon {
      margin-bottom: 10rpx;
    }

    .stat-content {
      .num {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 6rpx;
      }

      .label {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>
